<template>
  <div class="grid-page">
    <!-- 顶部标题 -->
    <h2 class="title">当前是 {{ displayLabName }} 实验室</h2>

    <!-- 中间内容区域 -->
    <div class="content-container">
      <div 
        v-for="(bench, index) in benches" 
        :key="index" 
        class="bench-panel"
      >
        <h3 class="bench-title">实验台编号：{{ bench.benchId }}</h3>
        
        <div class="bench-details">
          <div class="detail-row">
            <label>制冷剂种类:</label>
            <input 
              type="text" 
              v-model="bench.refrigerantType" 
              :readonly="!isEditing"
              :class="{ 'editable-input': isEditing }"
            >
          </div>
          
          <div class="detail-row">
            <label>制冷剂重量 (kg):</label>
            <input 
              type="number" 
              v-model.number="bench.refrigerantWeight" 
              :readonly="!isEditing"
              :class="{ 'editable-input': isEditing }"
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-buttons">
      <button 
        v-if="!isEditing" 
        class="edit-button" 
        @click="startEditing"
      >
        编辑
      </button>
      <template v-else>
        <button class="save-button" @click="saveChanges">
          保存
        </button>
        <button class="cancel-button" @click="cancelEditing">
          取消
        </button>
      </template>
      <button class="back-button" @click="goBack">返回主页</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    gridId: {
      type: String,
      required: true,
      default: '未知实验室'
    }
  },
  data() {
    return {
      benches: [],
      isEditing: false,
      originalData: [] // 用于保存原始数据以便取消编辑
    }
  },
  computed: {
    displayLabName() {
      return this.gridId || '未知实验室'
    }
  },
  created() {
    this.loadBenchesData()
  },
  methods: {
    handleBack() {
      // 确保父组件监听的是 'back' 事件
      this.$emit('back')
    },
    startEditing() {
      // 进入编辑模式，备份原始数据
      this.originalData = JSON.parse(JSON.stringify(this.benches))
      this.isEditing = true
    },
    saveChanges() {
      // 这里可以添加保存到服务器的逻辑
      console.log('保存的数据:', this.benches)
      this.isEditing = false
      this.originalData = []
    },
    cancelEditing() {
      // 恢复原始数据
      this.benches = JSON.parse(JSON.stringify(this.originalData))
      this.isEditing = false
      this.originalData = []
    },
    loadBenchesData() {
      if (!this.gridId) {
        this.benches = this.getDefaultBenches()
        return
      }
      
      this.benches = this.getFakeBenchesForLab(this.gridId)
    },
    // 假数据构造函数
    getFakeBenchesForLab(labName) {
      const safeLabName = labName || ''
      const list = []
      
      // 模拟不同实验室对应不同实验台和数据
      if (safeLabName.includes("Calorimeter")) {
        list.push({ benchId: "C-01", refrigerantType: "R134a", refrigerantWeight: 1.2 })
        list.push({ benchId: "C-02", refrigerantType: "R410A", refrigerantWeight: 2.0 })
      } else if (safeLabName.includes("Reliability")) {
        list.push({ benchId: "R-01", refrigerantType: "R1234yf", refrigerantWeight: 0.9 })
        list.push({ benchId: "R-02", refrigerantType: "R134a", refrigerantWeight: 1.5 })
        list.push({ benchId: "R-03", refrigerantType: "R404A", refrigerantWeight: 2.2 })
      } else {
        list.push({ benchId: "GEN-01", refrigerantType: "R290", refrigerantWeight: 1.0 })
      }
      return list
    },
    getDefaultBenches() {
      return [
        { benchId: "DEFAULT-01", refrigerantType: "默认制冷剂", refrigerantWeight: 0.0 }
      ]
    }
  }
}
</script>

<style scoped>
.grid-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.title {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
}

.content-container {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 20px;
}

.bench-panel {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f9f9f9;
}

.bench-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}

.bench-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.detail-row {
  display: flex;
  align-items: center;
}

.detail-row label {
  width: 120px;
  font-weight: bold;
}

.detail-row input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f5f5f5;
}

.detail-row input.editable-input {
  background-color: #fff;
  border-color: #4CAF50;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.back-button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  min-width: 100px;
}

.edit-button {
  padding: 10px 20px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  min-width: 100px;
}

.save-button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  min-width: 100px;
}

.cancel-button {
  padding: 10px 20px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  min-width: 100px;
}

.back-button:hover {
  background-color: #45a049;
}

.edit-button:hover {
  background-color: #0b7dda;
}

.save-button:hover {
  background-color: #45a049;
}

.cancel-button:hover {
  background-color: #d32f2f;
}

@media (max-width: 600px) {
  .bench-details {
    grid-template-columns: 1fr;
  }
  
  .detail-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .detail-row input {
    width: 100%;
    margin-top: 5px;
  }

  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
}
</style>